<template>
  <view class="order-list back_color">
    <!-- :auth="true" 是表示需要权限登录的 -->
    <tabs
      :current="current"
      @change="handleChange"
      height="80"
      bar-width="60"
      :barStyle="{ bottom: '0' }"
      :auth="true"
      bgColor="#fff"
      activeColor="#000"
      inactiveColor="#222"
      lineColor="linear-gradient(to right, rgba(54, 144, 255, 1), rgba(132, 86, 255, 1))"
    >
      <tab v-for="(item, i) in tabList" :key="i" :name="item.name"> </tab>
    </tabs>
    <view class="orderList pt-[20rpx]" v-if="isLogin">
      <orderList :orderStatus="orderStatus"></orderList>
    </view>
    <!-- <view class="mt-[300rpx] flex flex-col items-center w-full">
            <u-button shape="circle" @click="toLogin">登录</u-button>
            <view class="text-info mt-2">抱歉，您尚未登录！</view>
        </view> -->

    <!-- Component 支付 -->
    <payment
      v-if="payState.showPay || payState.showCheck"
      v-model:show="payState.showPay"
      v-model:show-check="payState.showCheck"
      :order-id="payState.orderId"
      :order_amount="payState.order_amount"
      :from="payState.from"
      :redirect="payState.redirect"
      @success="handlePayResult"
    />

    <tabbar />
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, reactive } from "vue";
import { onLoad, onShow, onUnload, onHide } from "@dcloudio/uni-app";
import orderList from "./components/order-list.vue";
import tab from "@/components/tab/tab.vue";
import tabs from "@/components/tabs/tabs.vue";
import { useUserStore } from "@/stores/user";
import { removeStorageData } from "@/utils/util";

const userStore = useUserStore();
const payState = reactive({
  order_amount: "",
  orderId: "",
  from: "",
  showPay: false,
  showCheck: false,
  redirect: "/pages/order/index?type=0",
});
// 是否登录
const isLogin = computed(() => userStore.token);

const tabList = ref<any>([
  {
    name: "全部",
    orderStatus: "",
  },
  {
    name: "待支付",
    orderStatus: 0,
  },
  {
    name: "预约中",
    orderStatus: 1,
  },
  {
    name: "服务中",
    orderStatus: 2,
  },
  {
    name: "已完成",
    orderStatus: 3,
  },
  {
    name: "已关闭",
    orderStatus: 4,
  },
  {
    name: "派单中",
    orderStatus: 5,
  },
  {
    name: "立即预约",
    orderStatus: 6,
  },
]);
const current = ref<number>(0);
const totalAmount = ref(0);
const orderStatus = ref<string | number>("");
const handleChange = (index: number) => {
  current.value = Number(index);
  totalAmount.value = tabList;
  orderStatus.value = tabList.value[index].orderStatus;
};

const handlePayResult = async () => {
  payState.showPay = false;
  payState.showCheck = false;
  uni.redirectTo({
    url: `/pages/order/index?type=0`,
  });
};

//跳转至登录
const toLogin = () => {
  uni.redirectTo({ url: "/pages/login/login" });
};

onShow(() => {
  removeStorageData("selectDate");
  uni.$on("payment", (param: any) => {
    payState.orderId = param.order_id;
    payState.from = param.from;
    payState.order_amount = param.order_amount;
    payState.showPay = true;
    payState.redirect =
      payState.redirect +
      `?order_id=${param.order_id}&from=${param.from}&checkPay=true`;
  });
});

onLoad(async (options: any) => {
  current.value = options?.type * 1 || 0;
  orderStatus.value = options?.type - 1 < 0 ? "" : options?.type - 1;
  if (!Object.keys(options).length) {
    current.value = 0;
    orderStatus.value = "";
  }
  // h5支付用于弹起手动确认支付弹窗
  if (options?.checkPay) {
    payState.orderId = options.order_id;
    payState.from = options.from;
    payState.showCheck = true;
    return;
  }
});

onUnload(() => {
  uni.$off(["payment"]);
  payState.showPay = false;
});

onHide(() => {
  uni.$off(["payment"]);
});
</script>

<style lang="scss" scoped>
.element.style {
  background-color: red;
}

.orderList {
  height: calc(100vh - 44px - 100rpx - env(safe-area-inset-bottom));
}
</style>
